<template>
  <view class="vacant-container">
    <!-- 顶部导航栏 -->
    <nav-bar
      title="可租房源"
      :showSearch="true"
      :showShare="true"
      @search="showSearch"
      @share="shareList"
    ></nav-bar>
    
    <!-- 筛选条件区域 -->
    <filter-bar
      departmentText="部门"
      statusText="区域"
      filterText="筛选"
      @filter="handleFilter"
    ></filter-bar>
    
    <!-- 房源列表 -->
    <scroll-view scroll-y class="house-list" @scrolltolower="loadMore" :show-scrollbar="false">
      <view class="house-item" v-for="(item, index) in houseList" :key="index">
        <view class="house-image">
          <image :src="item.image" mode="aspectFill"></image>
        </view>
        <view class="house-content">
          <view class="house-info">
            <view class="house-title">{{item.title}}</view>
            <view class="house-detail">
              <text class="department">{{item.department}}<view class="call-btn"><uni-icons type="phone" size="14" color="#1890ff"></uni-icons><text>拨打</text></view></text>
              <text class="type">{{item.type}}</text>
              <text class="area">{{item.area}}m² | {{item.rooms}}</text>
              <text class="other">| 其他 | {{item.floor_info}}</text>
            </view>
            <view class="house-status">
              <text class="vacancy">空置{{item.vacancy_days}}天</text>
              <text class="date">可签约至{{item.available_until}}</text>
              <text class="tag" v-if="item.tag">{{item.tag}}</text>
            </view>
          </view>
          <view class="house-price">
            <text class="price">¥{{item.price}}/月</text>
            <view class="action-buttons">
              <view class="share-btn" @click="shareHouse(item)">
                <text>分享</text>
              </view>
              <view class="more-btn" @click="showMoreOptions(item)">
                <text>更多</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading" v-if="isLoading">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-if="noMore">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue';
import FilterBar from '@/components/filter-bar/index.vue';

export default {
  components: {
    NavBar,
    FilterBar
  },
  data() {
    return {
      houseList: [
        {
          image: '/static/house/house.png',
          title: '芭比伦堡6号4单元102·5',
          department: '总部 | 苏虎威',
          type: '合租',
          area: '0',
          rooms: '5室1厅1卫',
          floor: '1/6层',
          floor_info: '1/6层',
          vacancy_days: '27',
          available_until: '2027-09-07',
          price: '1,000',
          tag: '房源备注'
        },
        {
          image: '/static/house/house.png',
          title: '保利时代12号1单元804·5',
          department: '总部 | 苏虎威',
          type: '合租',
          area: '0',
          rooms: '4室1厅2卫',
          floor: '8/18层',
          floor_info: '8/18层',
          vacancy_days: '68',
          available_until: '2026-08-14',
          price: '900',
          tag: '房源备注'
        },
        {
          image: '/static/house/house.png',
          title: '创客广场1号1单元1214',
          department: '总部 | 苏虎威',
          type: '整租',
          area: '111',
          rooms: '1室1厅1卫',
          floor: '12/26层',
          floor_info: '12/26层',
          vacancy_days: '66',
          available_until: '2027-12-14',
          price: '1,800',
          tag: ''
        },
        {
          image: '/static/house/house.png',
          title: '创客广场1号1单元2007',
          department: '总部 | 苏虎威',
          type: '整租',
          area: '111',
          rooms: '1室1厅1卫',
          floor: '20/26层',
          floor_info: '20/26层',
          vacancy_days: '67',
          available_until: '2025-07-15',
          price: '1,800',
          tag: ''
        },
        {
          image: '/static/house/house.png',
          title: '光谷青年城9号1单元3214·3',
          department: '总部 | 苏虎威',
          type: '合租',
          area: '0',
          rooms: '4室1厅1卫',
          floor: '32/33层',
          floor_info: '32/33层',
          vacancy_days: '46',
          available_until: '2025-12-31',
          price: '900',
          tag: ''
        }
      ],
      isLoading: false,
      noMore: false,
      page: 1,
      pageSize: 10
    }
  },
  onLoad() {
    // 页面加载时获取房源数据
    this.getHouseList();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    refreshList() {
      // 刷新列表数据
      this.page = 1;
      this.noMore = false;
      this.getHouseList(true);
    },
    showSearch() {
      // 显示搜索界面
      uni.navigateTo({
        url: '/pages/house/search',
        animationType: 'slide-in-right'
      });
    },
    toggleFilter(type) {
      // 切换筛选条件
      uni.navigateTo({
        url: `/pages/house/filter?type=${type}`
      });
    },
    toggleSort() {
      // 切换排序方式
      uni.navigateTo({
        url: '/pages/house/sort'
      });
    },
    shareHouse(item) {
      // 分享房源
      uni.navigateTo({
        url: `/pages/house/share?id=${item.id}`
      });
    },
    showMoreOptions(item) {
      // 显示更多选项
      uni.navigateTo({
        url: `/pages/house/detail?id=${item.id}`
      });
    },
    getHouseList(refresh = false) {
      // 获取房源列表数据
      this.isLoading = true;
      setTimeout(() => {
        this.isLoading = false;
        this.noMore = true;
      }, 1000);
    },
    loadMore() {
      if (!this.isLoading && !this.noMore) {
        this.getHouseList();
      }
    },
    handleFilter(type) {
      // 根据不同的筛选类型跳转到相应页面
      switch(type) {
        case 'department':
        case 'status':
        case 'filter':
        case 'sort':
          uni.navigateTo({
            url: `/pages/house/filter?type=${type}`
          });
          break;
      }
    },
    shareHouse(item) {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },
    shareList() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },
    showMoreOptions(item) {
      // 显示更多选项
      uni.navigateTo({
        url: `/pages/house/detail?id=${item.id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.vacant-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  
  .house-list {
    flex: 1;
    padding: 20rpx;
  }
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #fff;
  padding: 0 30rpx;
  position: relative;
  
  .nav-left {
    position: absolute;
    left: 30rpx;
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .nav-right {
    position: absolute;
    right: 30rpx;
    height: 100%;
    display: flex;
    align-items: center;
  }
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 30rpx;


  .sort-item {
    position: relative;
    padding-right: 30rpx;
    
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 0;
      height: 0;
      border-left: 6rpx solid transparent;
      border-right: 6rpx solid transparent;
      border-bottom: 6rpx solid #666;
      transform: translateY(-8rpx);
    }
    
    &::before {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 0;
      height: 0;
      border-left: 6rpx solid transparent;
      border-right: 6rpx solid transparent;
      border-top: 6rpx solid #666;
      transform: translateY(2rpx);
    }
  }
  
  .filter-item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    padding: 0 20rpx;
    position: relative;
    
    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1rpx;
      height: 24rpx;
      background-color: #eee;
    }
    
    text {
      margin-right: 8rpx;
    }
    
    .uni-icons {
      margin-left: 4rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.house-list {
  padding: 20rpx;
  height: calc(100vh - 180rpx);
  box-sizing: border-box;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.house-item {
  display: flex;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  padding: 0;
  transition: transform 0.2s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.house-image {
  position: relative;
  width: 240rpx;
  // height: 180rpx;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8rpx;
  margin: 16rpx;

  image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }


}

.house-content {
  flex: 1;
  padding: 24rpx 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  position: relative;
  
  .house-tag {
    position: absolute;
    right: 20rpx;
    top: 24rpx;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    font-size: 20rpx;
    line-height: 1.4;
  }
  
  .house-info {
    flex: 1;
    width: 100%;
  }

  .house-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }

  .house-detail {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    
    text {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      
      &.department {
        color: #1890ff;
        font-weight: 500;
        font-size: 22rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .call-btn {
          display: inline-flex;
          align-items: center;
          margin-left: 8rpx;
          padding: 2rpx 8rpx;
          border-radius: 4rpx;
          background-color: rgba(24, 144, 255, 0.1);
          
          text {
            color: #1890ff;
            font-size: 24rpx;
            margin-left: 4rpx;
          }
        }
      }
      
      &.type {
        background-color: #f5f5f5;
        padding: 4rpx 16rpx;
        border-radius: 4rpx;
        font-size: 26rpx;
      }
      
      &.area, &.other {
        color: #666;
        font-size: 22rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      &.other {
        color: #999;
      }
    }
  }

  .house-status {
    font-size: 24rpx;
    color: #999;
    line-height: 1.4;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16rpx;
    
    text {
      display: inline-block;
      margin-right: 16rpx;
      
      &:last-child {
        margin-right: 0;
      }

      &.vacancy {
        color: #ff4d4f;
      }
      
      &.tag {
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
        font-size: 20rpx;
      }
    }
  }
}

.house-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .price {
    font-size: 32rpx;
    font-weight: bold;
    color: #ff4d4f;
    white-space: nowrap;
  }
  
  .action-buttons {
    display: flex;
    gap: 16rpx;
    flex-shrink: 0;
    
    .share-btn,
    .more-btn {
      padding: 8rpx 20rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      transition: all 0.3s ease;
      
      &:active {
        opacity: 0.8;
      }
    }
    
    .share-btn {
      background-color: #f5f5f5;
      
      text {
        color: #666;
      }
    }
    
    .more-btn {
      background-color: #e6f7ff;
      
      text {
        color: #1890ff;
      }
    }
  }
}

.loading,
.no-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 24rpx;
  background-color: transparent;
}
</style>